import React from 'react';
import { Menu, Icon } from 'antd';
import _ from 'lodash';
import styles from './index.less';

const defaultFunc = (d) => d;
const SubMenu = Menu.SubMenu;
function MenuBar({
    style = {},
    data = [],
    width = 240,
    theme = 'dark',
    mode = 'inline',
    openKeys,
    onOpenChange = v => v,
    defaultSelectedKeys = [],
    selectedKeys = [],
    onItemClick = defaultFunc,
}) {
    const getUrl = (e) => {
        const { key, keyPath, item: { props: { url } } } = e;
        onItemClick({url, key, keyPath});
    };
    const renderMenu = (originData) => _.map(originData, (d) => {
        const { name, code, url, ico, children } = d;
        if (children && children.length > 0) {
            const subMenu = renderMenu(children);
            return (
                <SubMenu
                    key={code}
                    title={
                        <span>
                            <Icon type={ico}/>
                            {mode === 'inline' ? <soan>{name}</soan> : null}
                        </span>
                    }
                >
                    {subMenu}
                </SubMenu>
            );
        }
        return (
            <Menu.Item
                key={code}
                url={url}
            >
                <span><Icon type={ico}/><span>{name}</span></span>
            </Menu.Item>
        );
    });
    return (
        <div
            style={style}
            className={styles.normal}
        >
            <Menu
                onClick={getUrl}
                openKeys={openKeys}
                onOpenChange={onOpenChange}
                style={{width: `${width}px`}}
                mode={mode}
                theme={theme}
                selectedKeys={selectedKeys}
                defaultSelectedKeys={defaultSelectedKeys}
            >
                {renderMenu(data)}
            </Menu>
        </div>
    );
}

export default MenuBar;
